import React from 'react';
import { connect } from 'dva';
import { Modal, Checkbox, Table } from 'antd';
import { mapStateToProps, ObjectType } from '../../../../utils';
import style from './lockModal.less';

interface StateType {
  fullyLock: boolean;
  indirectLock: boolean;
  deleteEmail: boolean;
  longer: boolean;
  lockReason: string;
  selectedRowKeys: number[];
  tableWithLen: number;
  columns: ObjectType[];
  tableData: ObjectType[];
}

class LockModalCom extends React.Component<ObjectType, StateType> {
  constructor(props: ObjectType) {
    super(props);
    this.state = {
      fullyLock: false,
      indirectLock: false,
      deleteEmail: false,
      lockReason: '',
      longer: false, // 锁定备注的字符串超过46位的点
      selectedRowKeys: [],
      tableWithLen: 500,
      columns: [],
      tableData: [], // modal渲染表格的数据
    };
  }

  componentDidMount(): void {
    const { userListColumns, rowsData } = this.props;
    const userIds = rowsData.map((val: ObjectType) => val.id);
    const columns = [].concat(userListColumns);
    const tableData = [].concat(rowsData);
    columns.pop();
    const tableWithLen = (columns.length + 1) * 120 + 800;
    this.setState({
      selectedRowKeys: userIds,
      tableWithLen,
      columns,
      tableData,
    });
  }

  // 完全锁定
  onFullyLockChange = (e: ObjectType) => {
    const fullyLock = e.target.checked;
    if (fullyLock) {
      this.setState({
        fullyLock,
        indirectLock: !fullyLock,
      });
    } else {
      this.setState({
        fullyLock,
      });
    }
  };

  // 间接锁定
  onIndirectLockChange = (e: ObjectType) => {
    const indirectLock = e.target.checked;
    if (indirectLock) {
      this.setState({
        indirectLock,
        fullyLock: !indirectLock,
        deleteEmail: !indirectLock,
      });
    } else {
      this.setState({
        indirectLock,
      });
    }
  };

  // 删除绑定的手机/邮箱
  onDeleteEmailChange = (e: ObjectType) => {
    const deleteEmail = e.target.checked;
    if (deleteEmail === true) {
      this.setState({
        deleteEmail,
        fullyLock: deleteEmail,
        indirectLock: !deleteEmail,
      });
    } else {
      this.setState({
        deleteEmail,
      });
    }
  };

  // 输入锁定原因
  handleLockReasonInsertChange = (e: ObjectType) => {
    const value = e.target.value.trim();
    const len = value.split('').length;
    if (len < 46) {
      this.setState({
        lockReason: value,
        longer: false,
      });
    } else {
      const showLockReason = value.slice(0, 45);
      this.setState({
        lockReason: showLockReason,
        longer: true,
      });
    }
  };

  /*
   * 表格行复选框的点击事件
   */
  onSelectUserListChange = (selectedRowKeys: number[]) => {
    const {
      risk: {
        tableData: { selectedUserList },
      },
      dispatch,
    } = this.props;
    const newSelectedUserList: ObjectType[] = [];
    selectedUserList.forEach((val: ObjectType) => {
      selectedRowKeys.forEach((n: number) => {
        if (val.id === n) newSelectedUserList.push(val);
      });
    });

    dispatch({
      type: 'risk/saveSelectedUserList',
      payload: newSelectedUserList,
    });
    this.setState({
      selectedRowKeys,
    });
  };

  render() {
    const { visible, handleOk, handleCancel, title, isGroupOption } = this.props;
    const {
      fullyLock,
      indirectLock,
      deleteEmail,
      lockReason,
      longer,
      selectedRowKeys,
      tableWithLen,
      columns,
      tableData,
    } = this.state;
    let optType = 0;
    if (fullyLock) {
      optType = 4;
      if (deleteEmail) {
        optType = 7;
      }
    } else {
      optType = 5;
    }
    let okBtnDisabled = (fullyLock || indirectLock || deleteEmail) && !!lockReason;
    if (isGroupOption) {
      okBtnDisabled =
        (fullyLock || indirectLock || deleteEmail) && !!lockReason && !!selectedRowKeys.length;
    }

    const rowSelection = {
      selectedRowKeys,
      // 选中项发生变化时的回调
      onChange: this.onSelectUserListChange,
    };
    return (
      <Modal
        title={title}
        visible={visible}
        onOk={() => {
          handleOk({ remark: lockReason, optType });
        }}
        onCancel={handleCancel}
        className={style.lockModalStyle}
        maskClosable={false}
        width="60%"
        centered
        okButtonProps={{
          disabled: !okBtnDisabled,
        }}
      >
        <section className="lockModalContent">
          <div className="lockType">
            <div className="leftSide">
              <span className="requireMark">*</span>
              <span>锁定方式:</span>
            </div>

            <div className="rightSide">
              <p>
                <Checkbox onChange={this.onFullyLockChange} checked={fullyLock}>
                  完全锁定
                </Checkbox>
                <Checkbox onChange={this.onDeleteEmailChange} checked={deleteEmail}>
                  删除绑定邮箱
                </Checkbox>
              </p>
              <p>用户无法登陆平台</p>
              <p>
                <Checkbox onChange={this.onIndirectLockChange} checked={indirectLock}>
                  间接锁定
                </Checkbox>
              </p>
              <p>用户可以登陆，不可投注，不可冲转提</p>
              {!(fullyLock || indirectLock || deleteEmail) && (
                <p className="warn">请选择锁定方式</p>
              )}
            </div>
          </div>
          <div className="lockReason">
            <div className="leftSide">
              <span>*</span>
              <span>申请锁定原因:</span>
            </div>
            <div className={`rightSide lockReasonContent ${!lockReason ? 'insertTip' : ''}`}>
              <textarea
                className="lockReasonInsert"
                onChange={this.handleLockReasonInsertChange}
                value={lockReason}
              />
              {!lockReason && <p className="warn">请填写锁定原因</p>}
              {longer && <p className="warn">备注不能超过45个字符</p>}
            </div>
          </div>
          {isGroupOption && (
            <Table<>
              columns={columns}
              rowSelection={rowSelection}
              dataSource={tableData}
              rowKey={(record: ObjectType) => record.id}
              scroll={{ y: 200, x: tableWithLen }}
              bordered
              pagination={false}
              className={style.lockTable}
            />
          )}
        </section>
      </Modal>
    );
  }
}
export const LockModal = connect(mapStateToProps)(LockModalCom);
